<template>
    <div class="login-user">
        <h1>登录-用户名登录</h1>
        <p>
            <label>用户名: <input type="text" v-model="info.user"></label>
        </p>
        <p>
            <label>密&emsp;码: <input type="text" v-model="info.pwd"></label>
        </p>
        <p>
            <button @click="loginHandler">登录</button>
        </p>
    </div>
</template>

<script>
    export default {
        name:"UserLoginView",
        data(){
            return {
                info:{
                    user:"",
                    pwd:""
                }
            }
        },
        methods:{
            loginHandler(){
                if(this.info.user && this.info.pwd){
                    console.log("模拟登录成功");

                    localStorage.setItem("lgc",this.info.user);
                    localStorage.setItem("token","xxxx");

                    // 错误写法(vue支持,但是Vue gg)  => 此数据没有存储到全局, 而是被Proxy代理对象拦截存储
                    // this.$lgc = this.info.user;
                    // this.$token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxx";


                    // 直接找到根组件 app  修改全局数据
                    // 1.    this.$ 当前组件的Vue实例
                    //       也可以通过 getCurrentInstance() 获取 (Vue3 组合式语法setup)

                    // 2. 每一个组件都可以通过appContext 访问根组件  
                    // let app = this.$.appContext;   // 当前组件 -> 根组件
                
                    let app = this.$.appContext;   // 当前组件 -> 根组件
                    app.config.globalProperties.$lgc = this.info.user;
                    app.config.globalProperties.$token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxx";

                    // 默认跳转主页  => 不行(万一从详情页过来就有问题)
                    // this.$router.push("/")

                    // 采用 this.$router.back();  => 根据业务需求来, (注册 -> 登录 -> 跳转首页 ,此情况可能会被卡bug)
                    // this.$router.back();    // 登录成功之后 直接返回  (注册 -> 登录 -> 跳转首页)



                    // console.log(getCurrentInstance());

                    let {ReturnUrl} = this.$route.query;
                    if(ReturnUrl){
                        // this.$router.back(); 
                        // this.$router.push(ReturnUrl);
                        this.$router.replace(ReturnUrl);
                    }else{
                        this.$router.push("/");
                    }



                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>